<template>
  <div>
     <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
     <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
     <el-breadcrumb-item>商品管理</el-breadcrumb-item>
     <el-breadcrumb-item>商品列表</el-breadcrumb-item>
     </el-breadcrumb>
     <!-- 卡片 -->
     <el-card>
       <el-row :gutter="20">
         <el-col :span='6'>
             <el-input placeholder="请输入内容"  clearable v-model="getgoodsinfo.query" @clear='getgoodsdata()'>
              <el-button slot="append" icon="el-icon-search" @click='getgoodsdata()'></el-button>
            </el-input>
         </el-col>
         <el-col :span='4'>
            <el-button type='primary' @click="addgoods">添加商品</el-button>
         </el-col>
       </el-row>
       <el-row>
         <el-table :data='getgoodslist'  stripe   border>
           <el-table-column type='index' label='#'></el-table-column>
           <el-table-column label='商品名称' prop='goods_name'></el-table-column>
           <el-table-column label='商品价格(￥)' prop='goods_price'  width='110px'></el-table-column>
           <el-table-column label='商品数量' prop='goods_number'  width='80px'></el-table-column>
           <el-table-column label='商品重量(kg)' prop='goods_weight'  width='110px'></el-table-column>
           <el-table-column label='添加时间'  width='160px'>
             <template slot-scope="scope">
               {{scope.row.add_time | date}}
             </template>
           </el-table-column>
           <el-table-column label='操作'  width='200px' >
             <template slot-scope="scope">
               <el-button  type="primary" icon="el-icon-edit" size='mini' @click="editgoodsinfo(scope.row)">编辑</el-button>
               <el-button  type="danger" icon="el-icon-delete" size='mini' @click='deletegoods(scope.row)'>删除</el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-row>
       <el-row>
           <el-pagination
            background
           @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="getgoodsinfo.pagenum"
          :page-sizes="[30, 60, 120, 240]"
          :page-size="getgoodsinfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
    </el-pagination>
       </el-row>
     </el-card>
     <!-- 编辑商品数据弹窗 -->
     <el-dialog
      title="提示"
      :visible.sync="editgoodsdialog"
      width="50%">
      <el-form :model="findDditGoodsInfo" :rules="rules" ref="findDditGoodsInforef" label-width="100px">
     <el-form-item label="商品名称" prop="goods_name">
      <el-input v-model="findDditGoodsInfo.goods_name"></el-input>
     </el-form-item>
     <el-form-item label="商品价格" prop="goods_price">
      <el-input v-model="findDditGoodsInfo.goods_price"></el-input>
     </el-form-item>
     <el-form-item label="商品数量" prop="goods_number">
      <el-input v-model="findDditGoodsInfo.goods_number"></el-input>
     </el-form-item>
     <el-form-item label="商品重量" prop="goods_weight">
      <el-input v-model="findDditGoodsInfo.goods_weight"></el-input>
     </el-form-item>
     <!-- <el-form-item label="商品分类" prop="goods_cat">
      <el-input v-model="findDditGoodsInfo.goods_weight"></el-input>
     </el-form-item> -->
      </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editgoodsdialog = false">取 消</el-button>
    <el-button type="primary" @click="posteditfrom">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
  export default {
    name:'goodslist',
    data () {
      return {
        getgoodsinfo:{
          query:'',
          pagenum	: 1,
          pagesize : 30
        },
        getgoodslist:[],
        total:0,
        editgoodsdialog:false,
        //查询商品信息
        findDditGoodsInfo:{},
        ueserinfo:{},
        cat_name:'',
        rules:{
          goods_name:[
           { required: true, message: '请输入商品名称', trigger: 'blur' }
          ],
          goods_price:[
            { required: true, message: '请输入商品价格', trigger: 'blur' }
          ],
          goods_number:[
             { required: true, message: '请输入商品个数', trigger: 'blur' }
          ],
          goods_weight:[
            { required: true, message: '请输入商品重量', trigger: 'blur' }
          ]
        }
      }
    },
    filters: {
      date(nowdate){
        const date= new Date(nowdate)
        const y = date.getFullYear()
        const m = (date.getMonth() + 1 +'').padStart(2,'0')
        const d = (date.getDate() + '').padStart(2,'0')

        const hh = (date.getHours() + '').padStart(2,'0')
        const mm = (date.getMinutes() + '').padStart(2,'0')
        const ss = (date.getSeconds() + '').padStart(2,'0')

        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
      } 
    },
    created () {
      this.getgoodsdata()
    },
    methods: {
      //获取商品数据
     async  getgoodsdata(){
      const result =  await this.$http.get('goods', {params: this.getgoodsinfo})
      console.log(result)
       if(result.data.meta.status !=200){
          return this.$message({showClose: true,message: `获取商品列表数据失败`,type: 'error'})
     }
        //  this.$message({showClose: true,message: `获取商品列表数据成功`,type: 'success'})

        //总页数
        this.total=result.data.data.total
         this.getgoodslist =  result.data.data.goods
         console.log(this.getgoodslist)

     },
     //设置一页显示多少条数据
     handleSizeChange(val){
       this.getgoodsinfo.pagesize =val
        this.getgoodsdata()
     },
     //跳转到第几页
     handleCurrentChange(val){
       this.getgoodsinfo.pagenum=val
        this.getgoodsdata()
     },
     //删除商品
     async deletegoods(userinfo){
       console.log(userinfo)
        let comfigResult= await this.$MessageBox(`此操作将永久删除该商品${userinfo.goods_name}数据, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
         if(comfigResult !='confirm'){
         return  this.$message('取消删除成功！');
       }
       
      const  result= await this.$http.delete(`goods/${userinfo.goods_id}`)
      if(result.data.meta.status !=200){
      return this.$message({showClose: true,message: `删除商品失败`,type: 'error'})
      }
       this.$message({showClose: true,message: `删除商品成功！`,type: 'success'})
      this.getgoodsdata()
     },
     //编辑商品信息
    async editgoodsinfo(userinfo){
        console.log(1)
         //获取商品分类数据
         const result = await this.$http.get(`categories/${userinfo.goods_id}`)
         if(result.data.meta.status !=200){
           return  this.$message({showClose: true,message: `获取商品分类失败`,type: 'error'})
         }
         this.cat_name=result.data.data.cat_name
         console.log(result)
     
      this.userinfo=userinfo
      this.editgoodsdialog=true
      this.findgoodsinfo(userinfo)
     },
     //查找商品信息
     async findgoodsinfo(userinfo){
     const result = await this.$http.get(`goods/${userinfo.goods_id}`)
     if(result.data.meta.status !=200){
       return this.$message({showClose: true,message: `查询商品信息失败`,type: 'error'})
     }
     this.findDditGoodsInfo=result.data.data
     },
     //提交修改商品信息
     async posteditfrom(){
       const result = await this.$http.put(`goods/${this.userinfo.goods_id}`,{
         goods_name:this.findDditGoodsInfo.goods_name,
         goods_price:this.findDditGoodsInfo.goods_price,
         goods_number:this.findDditGoodsInfo.goods_number,
         goods_weight:this.findDditGoodsInfo.goods_weight,
         cat_name:this.cat_name
       })
       console.log(result)
       console.log(this.ueserinfo)
      this.editgoodsdialog = false
     },
    //添加商品数据
    addgoods(){
      this.$router.push('/add')
    }
    }
  }
</script>

<style lang="less" scoped>
 .el-card{
   margin-top: 10px;
 }
 .el-table{
   margin-top: 10px;
 }
 .el-pagination{
   margin-top: 20px;
 }
</style>